<template>
  <!-- 导航栏 desktop下和mobile下的导航栏 -->
  <Header
    @changeComponentByRoute="changeComponentByRoute"
    @changeComponent="updateComponent"
    :activeRoute="activeRoute"
    :headerData="headerData"
  />

  <div class="h-screen bg-cover bg-center" :style="backgroundStyle">
    <!-- 中间标题 -->
    <h1
      class="absolute inset-0 flex items-center justify-center text-white text-4xl md:text-6xl font-bold relative-container"
    >
      MyBlog
    </h1>
  </div>

  <div class="w-full h-full dark:bg-gray-900">
    <!-- 主容器 -->
    <div
      class="w-full h-full overflow-x-hidden dark:bg-gray-900 rounded-lg shadow-lg space-y-6"
    >
      <!-- 动态组件渲染 -->
      <component :is="currentRenderComponent"></component>
    </div>
  </div>
  <My-backTop :showOffseY="900"></My-backTop>
</template>
<script setup>
import { defineAsyncComponent, shallowRef, ref, computed, onMounted } from 'vue'
import Header from './components/header/index.vue'
import { useWindowSize } from '@vueuse/core'
import { useRouter } from 'vue-router'
// 获取当前视口的高度
const { width } = useWindowSize()
// 定义导航栏数据
const headerData = shallowRef([
  {
    text: '归档',
    icon: 'fas fa-archive',
    component: defineAsyncComponent(() => import('./Archive/index.vue')),
    isActive: false
  },
  {
    text: '关于',
    icon: 'fas fa-tag',
    component: defineAsyncComponent(() => import('./About/index.vue')),
    isActive: false
  },
  {
    text: '我的',
    icon: 'fas fa-user',
    component: defineAsyncComponent(() => import('./Profile/index.vue')),
    isActive: true
  },
  {
    text: '生活碎片',
    icon: 'fas fa-cogs',
    component: defineAsyncComponent(() => import('./Cate/index.vue')),
    isActive: false
  }
])
// 当前渲染的组件
const currentRenderComponent = shallowRef(
  defineAsyncComponent(() => import('./Profile/index.vue')) // 默认组件
)
// 当前激活的导航项路径
const activeRoute = ref('/profile')
// 切换组件方法
const updateComponent = (component, item) => {
  window.scrollTo(0, 0)
  window.scrollTo({
    top: 718,
    behavior: 'smooth'
  })
  currentRenderComponent.value = component
  // 更新激活状态
  headerData.value.forEach((data) => {
    data.isActive = data === item
  })
  activeRoute.value = item.text
}
const router = useRouter()
// 切换到首页
const changeComponentByRoute = (route) => {
  // Skip activating "首页" highlight
  if (route === '/home') {
    router.push('/home')
    return
  }
  activeRoute.value = route
  router.push(route)
}
// 背景样式
const backgroundStyle = computed(() => ({
  backgroundImage:
    width.value >= 768
      ? "url('https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/cover5.jpg')"
      : "url('https://beloved-1308416229.cos.ap-chengdu.myqcloud.com/images/cover5_small.png')",
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center'
}))
</script>

<style scoped>
.relative-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1; /* 使文字处于上方 */
}
</style>
